<template>
    <div>
        <div class="accountNum">
            <div class="accountNum-top">
                <el-form ref="form">
                    <el-form-item label="" class="lf" label-width="10px">
                        <el-select v-model="sexModel" style='width: 130px;' size="mini" placeholder="">
                            <el-option label="有效" value="0">有效</el-option>
                            <el-option label="作废" value="1">作废</el-option>
                            <el-option label="不限" value="2">不限</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="费用名称" label-width="90px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="costName" style='width: 150px !important;' size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="类别" label-width="50px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="accounStyle" style='width: 150px !important;' size="mini"></el-input>
                    </el-form-item>
                </el-form>
                <button class="check-btn" @click="allList" style="margin-left: 130px;" type="button"><!-- " -->
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">
                    查询
                </button>
            </div>

            <div class="accountNum-con">
                <el-row>
                    <el-col :span="24" class="table-fun">
                        <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="allList">刷新</div>
                        <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="addClass">添加</div>
                        <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="showUpdateWin">修改</div>
                        <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf">
                        <div class="lf choose-title fun-text" @click="deleteClass">删除</div>
                    </el-col>
                </el-row>
                <el-row class="lf" style="width: 100%;">
                    <el-col :span="24">
                        <avue-crud @current-change="rowChange" @current-row-change="currentRowChange" :data="bearFruit"
                                   :page="page" :option="dataForm"></avue-crud>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!--添加弹窗 S-->
        <div class="addMoal" v-if="addMoal"></div>
        <div class="addModal-content" v-if="addModalContent">
            <div class="left-choose lf">
                <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf">
                <div class="lf title" style="color: #009688;padding-left: 10px;">{{this.xiuTitle}}</div>
            </div>
            <div class="addModal-box">
                <el-form ref="form">
                    <el-form-item label="费用名称*" label-width="75px" class="lf" style="margin-left: 20px;">
                        <el-input title="必须填写" v-model="costNames" style='width: 120px !important;' size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="类别" label-width="50px" class="lf" style="margin-left: 20px;">
                        <el-input v-model="accounStyles" style='width: 150px !important;' size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="计费方式*" label-width="100px" class="lf">
                        <el-cascader title="必须填写" size="mini" :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
                    </el-form-item>

                    <el-form-item label="费用公式*" label-width="100px" class="lf" style="margin-left: 45px;">
                        <div class="costFormula">
                            <el-input title="必须填写" v-model="costFormula" style='width: 380px !important;' size="mini"></el-input>
                            <button type="button" class="ver-btn" @click="verFormula" style="margin-left: 30px;">
                                <img src="../../assets/imgs/operation_btn_icon_yanzheng_default copy.png" alt=""
                                     class="btn-img">
                                验证公式
                            </button>
                            <div class="explanatory">
                                <span>注：<span>1. 公式中可直接输入数值；</span></span>
                                <p style="margin-top: -15px;">2.公式中也可以使用如下关键字结合运算式运算出结果：<span
                                        style="padding-left:10px;display:inline-block;color: #ED4014;">票价、票公里数、人数、票款、附加费合计、附加费每人、终点站票价；</span>
                                </p>
                                <p>3.除以上关键字外，公式中不允许出现中英文字或全角字符。</p>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="保底方案" label-width="100px" class="lf" style="margin: 15px 0 0 45px;">
                        <div class="scheme">
                            <div class="scheme-title">注：按人次计费方式不适用</div>
                            <div class="radio">
                                <div class="radio-txt lf">触发条件</div>
                                <el-radio v-model="radio" label="1">满足其一</el-radio>
                                <el-radio v-model="radio" label="2">满足全部</el-radio>
                            </div>
                            <el-form-item label="备注" label-width="80px" style="margin-left: 5px;">
                                <el-input v-model="radioRemarks" style='width: 330px !important;'
                                          size="mini"></el-input>
                            </el-form-item>
                            <el-form-item label="保底公式" label-width="80px" style="margin-left: 5px;">
                                <el-input v-model="radioformulas" style='width: 330px !important;' size="mini"></el-input>
                                <button type="button" class="ver-btn" @click="radioFormula" style="margin-left: 30px;">
                                    <img src="../../assets/imgs/operation_btn_icon_yanzheng_default copy.png" alt="" class="btn-img">
                                    验证公式
                                </button>
                            </el-form-item>

                            <div class="schemeData">
                                <el-row>
                                    <el-col :span="24" class="table-fun" style="height: 30px;">
                                        <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt=""
                                             class="lf">
                                        <div class="lf choose-title fun-text" @click="addIcon">添加</div>
                                        <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt=""
                                             class="lf">
                                        <div class="lf choose-title fun-text" @click="deleteIcon">删除</div>
                                        <img src="../../assets/imgs/Radio_icon_yingyong_default.png" alt=""
                                             class="lf">
                                        <div class="lf choose-title fun-text" @click="applyIcon">应用</div>
                                    </el-col>
                                </el-row>
                                <el-table @current-change="handleCurrentChange" highlight-current-row :data="tableData" height="130" border style="width: 100%">
                                    <el-table-column prop="project1" label="项目" width="180"> </el-table-column>
                                    <el-table-column prop="project2" label="比较方式" width="180"> </el-table-column>
                                    <el-table-column prop="project3" label="值" width="180"> </el-table-column>
                                </el-table>

                                <div class="schemeData-list" v-if="schemeData">
                                    <el-form-item label="" class="lf" style="flex: 1;">
                                        <el-cascader title="必须填写" size="mini" :options="peoOptions1" v-model="peopleOptions" @change="peoChange">
                                        </el-cascader>
                                    </el-form-item>
                                    <el-form-item label="" class="lf" style="flex: 1;">
                                        <el-cascader title="必须填写"  size="mini" :options="peoOptions2" v-model="peopleOptions1" @change="peoChange1">
                                        </el-cascader>
                                    </el-form-item>
                                    <el-form-item label="" label-width="" class="lf">
                                        <el-input v-model="peopleOptions2" style='width: 120px !important;' size="mini"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                    </el-form-item>

                    <!--验证通过 S-->
                    <div class="verPass" v-if="passTips"><span>验证通过</span></div>
                    <!--验证通过 E-->
                    <div class="btnbox rf">
                        <button type="button" class="cancel-btn rf" @click="cancelModalIco"><i class="cancel-icon lf"></i><span class="lf">取消</span></button>
                        <button type="button" class="sure-btn rf" @click="sureBtnIco"><i class="lf"></i><span class="lf">确定</span></button>
                    </div>
                </el-form>
            </div>
        </div>
        <!--添加弹窗 E-->
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                getId:'',
                xiuTitle:'',
                addMoal: false,
                addModalContent: false,
                schemeData: false,
                passTips: false,
                sexModel: '0',
                newIndex:0,
                currentRows: '',
                costName: '',
                costNames: '',
                accounStyle: '',
                accounStyles: '',
                costFormula: '',
                radio: '1',
                radioRemarks: '',
                radioformulas: '',
                selectedOptions: [],
                peopleOptions: [],
                peopleOptions1: [],
                tableData:[
                    /*{
                        project1:'王小虎',
                        project2:'王小虎',
                        project3:'王小虎'
                    },*/
                ],
                pOpt1: '',
                pOpt2: '',
                pOpt3: '',
                peopleOptions2: '0',
                bearFruit: [],
                page: {
                    pageSizes: [10],//分页信息 pageSize
                    total: 20,//总页数 totalRow
                    currentPage: 1,//当前第几页 pageNumber

                    pageSize: 10,//每一页加载多少条数据
                },
                dataForm: {
                    page: true,
                    align: 'center',
                    highlightCurrentRow: true,
                    addBtn: false,//是否添加按钮
                    delBtn: false,//是否添加删除按钮
                    editBtn: false,//是否添加编辑按钮
                    menu: false,//是否添加菜单按钮
                    index: true,
                    column: [
                        {
                            label: '类别',
                            prop: 'type',
                        },
                        {
                            label: '费用名称',
                            prop: 'name',
                        },
                        {
                            label: '计费方式',
                            prop: 'pay_type',
                        },
                        {
                            label: '公式',
                            prop: 'formula'
                        },
                        {
                            label: '备注',
                            prop: 'remark'
                        },
                    ]
                },
                peoOptions1: [
                    {
                        value: '总人数',
                        label: '总人数',
                    },
                    {
                        value: '总票款',
                        label: '总票款',
                    },
                ],
                peoOptions2: [
                    {
                        value: '小于',
                        label: '小于',
                    },
                    {
                        value: '小于等于',
                        label: '小于等于',
                    },
                    {
                        value: '大于',
                        label: '大于',
                    },
                    {
                        value: '大于等于',
                        label: '大于等于',
                    },
                    {
                        value: '等于',
                        label: '等于',
                    },
                ],
                options: [
                    {
                        value: '每人次',
                        label: '每人次',
                    },
                    {
                        value: '每班次',
                        label: '每班次',
                    },
                    {
                        value: '按天',
                        label: '按天',
                        children: [
                            {
                                value: '每天按车辆收',
                                label: '每天按车辆收'
                            },
                            {
                                value: '每天按营运单位收',
                                label: '每天按营运单位收'
                            },
                        ]
                    },
                    {
                        value: '按自然月',
                        label: '按自然月',
                        children: [
                            {
                                value: '每月按车辆收',
                                label: '每月按车辆收'
                            },
                            {
                                value: '每月按营运单位收',
                                label: '每月按营运单位收'
                            },
                        ]
                    },
                    {
                        value: '按自然年',
                        label: '按自然年',
                        children: [
                            {
                                value: '每年按车辆收',
                                label: '每年按车辆收'
                            },
                            {
                                value: '每年按营运单位收',
                                label: '每年按营运单位收'
                            },
                        ]
                    },
                ],
            };
        },
        methods: {
            handleChange(value) {
                // console.log(value);
            },
            peoChange(value) {
                console.log(value);
                if(value !== ''){
                    this.pOpt1 = value[0];
                }
            },
            peoChange1(value) {
                console.log(value);
                if(value !== ''){
                    this.pOpt2 = value[0];
                }
            },
            allList() { //刷新
                this.getId="";
                this.costNames = "";
                this.accounStyles = "";
                this.selectedOptions = "";
                this.costFormula = "";
                this.radio =  "";
                this.radioformulas = "";
                this.radioRemarks = "";
                    this.postRequest('/fin/balance/fee/list',
                    {
                        filterRules: JSON.stringify([
                            {"field": "del_flag", "op": "eq", "value": this.sexModel},
                            {"field": "name", "op": "cn", "value": this.costName},
                            {"field": "type", "op": "cn", "value": this.accounStyle}
                        ]),
                        order: 'asc,asc,asc',
                        page: this.page.currentPage,
                        rows: '10',
                        sort: 'fin_balance_fee_define.del_flag,fin_balance_fee_define.type,fin_balance_fee_define.name'
                    }).then(target => {
                    console.log(target);
                    var tag = target.data.list;
                    //页码大小
                    this.page.pageSize = target.data.pageSize;
                    //页码数
                    this.page.pageNumber = target.data.pageNumber;
                    //总页数
                    this.page.total = target.data.totalRow;
                    this.bearFruit = tag;
                });
            },
            addClass() { //添加
                this.xiuTitle = '添加';
                this.addMoal = true;
                this.addModalContent = true;
            },
            showUpdateWin() { //修改
                this.xiuTitle = '修改';
                this.addMoal = true;
                this.addModalContent = true;
                this.selectedOptions = [];
                // this.options = [];
                this.postRequest('/fin/balance/fee/get?id='+this.getId)
                    .then(target=>{
                        console.log(target);
                        var tag = target.data[1];
                        this.costNames = tag.name;
                        this.accounStyles = tag.type;
                       /* this.options.push({
                            value: tag.pay_type,
                            label: tag.pay_type,
                        });*/
                        this.selectedOptions = this.options;
                        this.costFormula = tag.formula;
                        this.radio =  tag.baodi_type;
                        this.radioformulas = tag.baodi_formula;
                        this.radioRemarks = tag.remark;
                    })
            },
            deleteClass() { //删除
                this.postRequest('/fin/balance/fee/del?id='+this.getId)
                    .then(target=>{
                        console.log(target);
                        if(target.data[0] === '0'){
                            this.$message.success(target.data[1]);
                            this.getFeeList();
                        }
                    })
            },
            rowChange(val) {
                console.log(val);
                this.page.currentPage = val;
                this.allList();
            },
            currentRowChange(val) {//点击行读取对应的信息
                console.log(val);
                this.getId = val.id;
            },
            verFormula() {//点击验证公式;
                if(this.costFormula === ''){
                    this.$message.error("请输入公式");
                }else{
                    this.isFormulaVaild();
                }
            },
            radioFormula() {//点击验证公式;
                if(this.radioformulas === ''){
                    this.$message.error("请输入公式");
                }else{
                   this.isFormulaVaild();
                }
            },
            isFormulaVaild(){
                // this.postRequest('/fin/balance/plan/fees/isFormulaVaild?f=%E7%A5%A8%E4%BB%B7*0.01*%E4%BA%BA%E6%95%B0')
                this.postRequest('/fin/balance/plan/fees/isFormulaVaild?f='+this.radioformulas+'')
                    .then(target=>{
                        console.log(target);
                        if(target.data[0] === '0'){
                            this.passTips =true;
                            //定时执行，2秒后执行
                            window.setTimeout(this.refreshCount, 2000);
                            this.$message.success('验证成功');
                        }
                    });
            },
            refreshCount() {
                this.passTips =false;
            },
            addIcon() {//弹窗-----添加
                if(this.pOpt1 !== '' && this.pOpt2 !== ''){
                    console.log(1);
                    this.newIndex++;
                    this.schemeData = false;
                    this.tableData.push({
                        project1: this.peopleOptions,
                        project2: this.peopleOptions1,
                        project3: this.peopleOptions2,
                        index:this.newIndex
                    });
                    this.pOpt1 = '';
                    this.pOpt2 = '';
                    this.pOpt3 = '';
                }else if(this.pOpt1 === '' && this.pOpt2 === ''){
                    this.schemeData = true;
                    this.peopleOptions = [];
                    this.peopleOptions1 = [];
                    this.peopleOptions2 = '0';
                }
            },
            deleteIcon() {//弹窗-----删除
                this.schemeData = false;

                var tag = this.tableData;
                for(var i=0;i<tag.length;i++){
                    // console.log(this.currentRows);
                    console.log(tag[i].index);
                    if(this.currentRows === tag[i].index){
                        this.tableData.splice(i,1);//因为下标删除了，所以会报错
                    }
                }
            },
            applyIcon() {//弹窗-----应用

            },
            sureBtnIco() {//弹窗确定按钮

                this.costNames === ''?this.$message.error("请填写费用名称"):this.costNames;
                this.selectedOptions == ''?this.$message.error("请填写计费方式"):this.selectedOptions;
                this.costFormula === ''?this.$message.error("请填写费用公式"):this.costFormula;

                console.log('balanceFee.baodi_rules=[{factor:'+this.peopleOptions[0]+'','operator:'+this.peopleOptions1[0]+'','val:'+this.peopleOptions2+'}]');
                this.postRequest('/fin/balance/fee/add',
                    {
                        'balanceFee.baodi_rules': JSON.stringify([
                            { 'factor':this.peopleOptions[0],'operator':this.peopleOptions1[0],'val':this.peopleOptions2 }
                        ]),
                        'balanceFee.id' : '',
                        'balanceFee.name' : this.costNames,
                        'balanceFee.type' : this.accounStyles,
                        'balanceFee.pay_type' : this.selectedOptions[1],
                        'balanceFee.formula' : this.costFormula,
                        'balanceFee.baodi_type' : this.radio,
                        'balanceFee.baodi_formula' : this.radioformulas,
                        'balanceFee.remark' : this.radioRemarks,
                    })
                // this.postRequest('/fin/balance/fee/add?balanceFee.id=&balanceFee.name=%E4%BA%BA%E5%91%98%E9%99%84%E5%8A%A0%E8%B4%B9&balanceFee.type=%E7%B1%BB%E5%88%AB2&balanceFee.pay_type=%E6%AF%8F%E7%8F%AD%E6%AC%A1&balanceFee.formula=%E7%A5%A8%E4%BB%B7*0.01*%E4%BA%BA%E6%95%B0&balanceFee.baodi_type=1&balanceFee.baodi_formula=%28%E7%A5%A8%E6%AC%BE-%E4%BA%BA%E6%95%B0*0.5%29*0.1&balanceFee.remark=%E5%A4%87%E6%B3%A8&balanceFee.baodi_rules=%5B%7B%22factor%22%3A%22%E6%80%BB%E4%BA%BA%E6%95%B0%22%2C%22operator%22%3A%22%E5%A4%A7%E4%BA%8E%E7%AD%89%E4%BA%8E%22%2C%22val%22%3A%221%22%7D%5D')
                    .then(target=>{
                        console.log(target);
                        if(target.data[0] === '0'){
                            this.$message.success(target.data[1]);
                            this.addMoal = false;
                            this.addModalContent = false;
                            this.getFeeList();
                        }else if(target.data[0] === '-1'){
                            this.$message.error(target.data[1]);
                            this.addMoal = false;
                            this.addModalContent = false;
                        }
                    });
            },
            cancelModalIco() {//弹窗取消按钮
                this.addMoal = false;
                this.addModalContent = false;
                this.costNames = '';
                this.accounStyles = '';
                this.costFormula = '';
                this.radio = '1';
                this.radioformulas = '';
                this.radioRemarks = '';
                this.peopleOptions = [];
                this.peopleOptions1 = [];
                this.peopleOptions2 = [];
            },
            handleCurrentChange(val) {
                this.currentRows = val.index;
                console.log(val);
            },
        },
        computed: {},
        watch: {
            peopleOptions2(){
                this.pOpt3 = this.peopleOptions2;
            },
        },
        mounted() {
            this.allList();
            this.$emit("sendActive","5-2");
        }
    };
</script>
<style scoped src="../../assets/css/financeManage/accountNum.css"></style>
<style scoped>
</style>